<template>

  <!--
    下拉选择框:
      type: 'select'
      placeholder:  下拉选择框占位文本，默认‘请选择’+label
      filterable:   可搜索，默认true
      multiple:     多选，默认false
      data:         绑定数据
      keyName:      绑定key，默认‘key’
      labelName:    绑定label，默认‘label’
      dict:         字典
      binding:      执行data: ()=>{} 返回参数的绑定路径
      width:        输入框宽度
      disabled:  是否禁用，默认false
      clearable: 是否可清空，默认true
  -->
  <el-select
    v-model="currentData"
    :filterable="filterable"
    :multiple="multiple"
    :placeholder="booleanFun(disabled)?'':placeholder || `请选择${label}`"
    :disabled="booleanFun(disabled)"
    :clearable="clearable"
    :style="{width}"
    size="mini"
  >
    <el-option
      v-for="item in itemsData"
      :key="item[keyName]"
      :label="item[labelName]"
      :value="item[keyName]"
    />
  </el-select>

</template>

<script>
import {booleanFun, currentData, geItemsData} from '@/components/FlyElement/common'

export default {
  name: 'ASelect',
  props: {
    prop: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    data: {
      type: String | Number
    },
    filterable: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String
    },
    keyName: {
      type: String,
      default: 'key'
    },
    labelName: {
      type: String,
      default: 'label'
    },
    dict: {
      type: String
    },
    option: {
      type: Array | Function
    },
    binding: {
      type: String
    },
    width: {
      type: String,
      default: '100%'
    },
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  data() {
    return {
      itemsData: []
    }
  },
  computed: {
    currentData
  },
  created() {
    this.setItemData()
  },
  methods: {
    booleanFun,
    geItemsData,
    async setItemData() {
      this.itemsData = await this.geItemsData(this.dict, this.option, this.binding)
    }
  }
}
</script>
